<template>
  <el-dialog
    title="录入时间设定"
    class="gl_dialog_TitleLine gl_dl_footer"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    :before-close="cancelDialog"
    width="550px"
  >
    <el-form
      ref="forms"
      :model="declareVO"
      label-width="150px"
      size="small"
      class="content"
      :rules="declareVO_Rules"
      @submit.native.prevent
    >
      <el-form-item label="考试成绩录入时间" prop="entryStartTime">
        <el-input v-show="false" v-model.trim="declareVO.entryStartTime" />
        <el-date-picker
          v-model="chooseTime"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          style="width: 80%;"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          @change="handleEntryTime"
        />
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button size="mini" @click="cancelDialog()">{{ $t('button.cancel') }}</el-button>
      <el-button size="mini" type="primary" :loading="btnLoading" @click="confirm()">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import validator from '@/lib/validate/index.js';
export default {
  data() {
    return {
      btnLoading: false,
      dialogVisible: false,
      declareVO: {
        entryStartTime: '',
        entryEndTime: ''
      },
      chooseTime: [],
      declareVO_Rules: {
        entryStartTime: [validator.required('日期不能为空', 'change')],
        entryEndTime: [validator.required('日期不能为空', 'change')]
      }
    };
  },
  created() {
    this.chooseTime = [];
  },
  methods: {
    confirm() {
      this.$refs.forms.validate(valid => {
        if (valid) {
          // this.btnLoading = true;
          // api_GET_ClubBranchDelegations().then(res => {
          //     this.btnLoading = false;
          // }, error => {
          //     this.btnLoading = false;
          //     const _msg = error.error.message || error.message;
          //     this.$message({ type: 'error', message: _msg });
          // });
        }
      });
    },
    handleEntryTime(time) {
      this.declareVO.entryStartTime = this.chooseTime && this.chooseTime[0];
      this.declareVO.entryEndTime = this.chooseTime && this.chooseTime[1];
    },
    cancelDialog() {
      this.dialogVisible = false;
      this.chooseTime = [];
    }
  }
};
</script>

<style lang="scss" scoped>
  .content {
    margin-top: 40px;
    height: 80px;
  }
</style>
